<template>
<div class="bg">
    <div  id="stage" class="canvas-content"  v-show="false" ></div>
    <el-card class="box-card" >
    <template #header>
        <div class="card-header">
        <span>文王喊你来卜卦</span>
        </div>
    </template>
    <div class="text item">
        <div class="box" :class="isLoading ? 'loadding':''"> 
        </div>
    </div>
    <div class="text item"><el-button :loading="isLoading" class="btn" @click="handelGua" type="primary">开摇</el-button></div>
    </el-card>

    <el-dialog
        title="签词"
        v-model="dialogVisible"
        width="30%"
        :before-close="handleClose">
            <br/><br/>
            <span v-html="`第${guaIndex}卦`"></span><br/><br/>
            <span v-html="`卦名:${guaName}`"></span><br/><br/>
            <span v-html="guaDes"></span><br/><br/>
        <template #footer>
            <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </template>
        </el-dialog>
</div>
</template>
<script lang="ts">
import { defineComponent ,inject, reactive, toRefs, onMounted, ref, watch  } from 'vue'
import { replaceUpToLo, delSemicolon, addSemicolon, isNumber } from '@/utils/public'
import { ElMessage, ElMessageBox } from "element-plus"
import Loading from '@/utils/loading'
import { useStore } from '@/store'
import { useRoute } from 'vue-router'
import * as spritejs from 'spritejs'
import yaoGua from '@/gua/index'
export default defineComponent ({
    props: {
        item: {
			type: Array,
			default: []
		},
        acitve: {
            type: Number,
            default: 0
        },
        index:{
            type: Number,
            default: 0
        },
        data: {
            type: Object,
            default: {}
        },
    },
    setup(props: any, context: any) {
       const store = useStore()
        const { params, query } = useRoute()
        const { loading } = Loading()
        const scroller = ref()
        const $api :any = inject('$api')
        let itemList: any = []
        const dataMap = reactive({
            itemList: Array(),
            moduleMessage: [],
            itemCommon: Object(),
            dictObj: {},
            guaName:String(),
            guaIndex:String(),
            guaDes:String(),
            dialogVisible:false,
            isLoading:false
        })
        const formTempalte: any = {
            enterpriseId: query.enterpriseId,
            orderId: query.orderId,
            showCaseNumberErr: '',
            PLRId: 0,
            DateTime: '',
            DateTimeType: '',
            HearingDepartment: '',
            CaseType: '',
            CaseNumber: '',
            InvolvedAmount: '',
            AmountInResult: false,
            InvolvedUnit: '',
            InvolvedCurrency: '',
            mType: '0',
            InvolvedPersons: [
            {
                InvolvedPerson: '',
                InvolvedPersonType: ''
            },
            {
                InvolvedPerson: '',
                InvolvedPersonType: ''
            }
            ],
            JudgmentResult: '',
            Comment: '',
        }
        const getGuaInfo = async () => {
            let params = {
                oId: query.orderId,
                enterpriseId: query.enterpriseId,
                CommentType: '2705'
            }

            let res = await $api.report.getLitigationCommon(params)
        }
        const anamit = async () =>{
            const container = document.querySelector('#stage');
            const {Scene, Sprite} = spritejs;
            const scene = new Scene({container, width: 600, height:600, mode: 'stickyTop'});
            const layer = scene.layer();
            const robot = new Sprite('../assets/1.jpg');
            robot.attr({
                anchor: [0, 0.5],
                pos: [100, 100],
                width:100,
                height:100
            });
            robot.animate([
                {rotate: 180},
            ], {
                duration: 500,
                iterations: Infinity,
            });
            layer.append(robot);
        }

       const kaiYao = ():void =>{
            let result = yaoGua();
            dataMap.guaName = result.name;
            dataMap.guaIndex= result.index;
            dataMap.guaDes= result.gua;
            dataMap.isLoading = false;
            dataMap.dialogVisible = true;
       }

       const handelGua = () => {
           var self = this;
            dataMap.isLoading=true;
            debugger
            setTimeout(() => {
                kaiYao()
            }, 2000);
       }
       const handleClose = (done) => { 
            done();
       }

        onMounted(() => {
            anamit();
        })
        return {
            ...toRefs(dataMap),
            scroller,
            getGuaInfo,
            handelGua,
            store,
            handleClose
        }
    }
})
</script>
<style lang="scss" scoped>
$boxHeight:170px; //浅线条颜

.bg{
     width:100%;
     height: 100%;
    .canvas-content{
     width: 600px;
     height: 600px;
     margin: 0 auto;
    }

}

  .box-card {
    width: 80%;
    margin:0 auto;
    margin-top:20px;
    .card-header{
        font-weight: bold;
        font-size: 20px;
        color: #6289db;
    }
    .text {
            font-size: 14px;
        }
    .btn{
         width: 120px;
         font-size: 14px;
    }
        
    .item {
            padding: 20px 20px;
            & .box{
                width: $boxHeight;
                height: $boxHeight;
                // border: solid 1px #6289db;
                margin: 0 auto;
                background-image: url();
                line-height: $boxHeight;
            }
            .loadding{
                animation: rotate 1s linear infinite;/*详情请看animation属性*/
            }
            @keyframes rotate {
                from{ transform:rotate(0deg)}
                from{ transform:rotate(360deg)}
            }
        }

  }

</style>